<template>
  <template v-for="item in data" :key="item.path">
    <el-menu-item v-if="!item.children && !item.meta?.hidden" :index="item.path">
      <component class="icons" :is="item.meta.icon"></component>
      <span>{{ item.meta.name }}</span>
    </el-menu-item>
    <el-sub-menu v-else-if="item.children && !item.meta?.hidden" :index="item.path">
      <template #title>
        <component class="icons" :is="item.meta.icon"></component>
        <span>{{ item.meta.name }}</span>
      </template>
      <subView :data="item.children"></subView>
    </el-sub-menu>
  </template>
</template>

<script setup lang="ts">
import subView from "./submenusView.vue"
// import { Menu as IconMenu } from "@element-plus/icons-vue"
// const icondeal = computed(() => {
//   return (value: string) => {
//     console.log("====================================")
//     console.log(value)
//     console.log("====================================")
//     return `el-icon-${value.toLowerCase()}`
//   }
// })
defineProps({
  data: Array as any,
})
</script>

<style lang="scss" scoped>
.icons {
  width: 18px;
  // height: 1em;
  margin-right: 10px;
}
</style>
